import React from 'react';
import { connect } from 'react-redux';
import { Link } from "react-router-dom";
import { actionCreator } from "../store";
import {
  ListItem,
  ListInfo,
  LoadMore
} from "../style";
class List extends React.PureComponent {
  render() {
    const {
      articleList,
      articlePage,
      getMoreList
    } = this.props
    return (
      <div>
        {
          articleList.map((item, index) => {
            return (
              <ListItem key={index}>
                <Link to={`/detail/${item.get('id')}`}>
                {/* <Link to={`/detail?id=${item.get('id')}`}> */}
                  <img
                    className="pic"
                    alt={item.get('title')}
                    src={item.get('imgUrl')}
                  />
                  <ListInfo>
                    <h3 className="title">{item.get('title')}</h3>
                    <p className="desc">{item.get('desc')}</p>
                  </ListInfo>
                </Link>
              </ListItem>
            )
          })
        }
        <LoadMore onClick={() => getMoreList(articlePage)}>更多文字</LoadMore>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    articleList: state.getIn(['home', 'articleList']),
    articlePage: state.getIn(['home', 'articlePage'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getMoreList(page) {
      dispatch(actionCreator.getMoreList(page+1));
    }
  }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(List);